<script setup>
	import { ref } from 'vue'
	import { message } from 'ant-design-vue'
	import { useSimpleQueryStore } from '@/views/plugin/dashboard/store/simpleQuery'

	const store = useSimpleQueryStore()

	// 格式化配置面板可见状态
	const formatConfigVisible = ref(false)

	// 格式化类型选项
	const formatTypes = [
		{ value: 'datetime', label: '时间格式化', formats: ['YYYY-MM-DD', 'YYYY-MM-DD HH:mm:ss', 'HH:mm:ss'] },
		{ value: 'mask', label: '数据脱敏', formats: ['手机号', '身份证号', '银行卡号', '自定义'] },
		{ value: 'fieldname', label: '修改名称', formats: ['自定义'] }
	]

	// 切换格式化配置面板
	const toggleFormatConfig = () => {
		formatConfigVisible.value = !formatConfigVisible.value
	}

	// 添加格式化配置
	const addFormatConfig = () => {
		if (!store.formData.itemConfig.tableName) {
			message.warning('请先选择数据表')
			return
		}
		const newConfig = {
			field: '',
			type: '',
			format: ''
		}
		store.setFormatConfig([...store.formData.itemConfig.formatConfig||[], newConfig])
	}

	// 删除格式化配置
	const removeFormatConfig = (index) => {
		const newConfig = [...store.formData.itemConfig.formatConfig]
		newConfig.splice(index, 1)
		store.setFormatConfig(newConfig)
	}

	// 重置格式化配置
	const resetFormatConfig = () => {
		store.setFormatConfig([])
	}

	const handleClickChange = () => {
		if (!store.formData.itemConfig.tableName) {
			message.warning('请先选择数据表')
			formatConfigVisible.value = false
		}
	}

	const updateFormatConfig = (index, field, value) => {
		const newConfig = [...store.formData.itemConfig.formatConfig]
		newConfig[index] = { ...newConfig[index], [field]: value }
		store.setFormatConfig(newConfig)
	}
</script>

<template>
	<a-tooltip title="格式化">
		<a-popover
			v-model:open="formatConfigVisible"
			trigger="click"
			placement="rightTop"
			overlay-class-name="format-config-popover"
			@handleClickChange="handleClickChange"
		>
			<template #content>
				<div class="format-config-panel">
					<div class="panel-header flex justify-between items-center mb-4">
						<span>格式化配置</span>
						<div class="flex gap-2">
							<a-button type="link" size="small" @click="addFormatConfig">添加</a-button>
							<a-button type="link" size="small" @click="resetFormatConfig">重置</a-button>
						</div>
					</div>
					<a-empty
						v-if="!store.formData.itemConfig.formatConfig || store.formData.itemConfig.formatConfig?.length === 0"
						description="暂无格式化规则"
					/>
					<div v-else class="format-config-list grid grid-cols-2 gap-4">
						<div
							v-for="(config, index) in store.formData.itemConfig.formatConfig || []"
							:key="index"
							class="format-config-item"
						>
							<div class="flex justify-between items-center mb-2">
								<span class="text-sm">规则 {{ index + 1 }}</span>
								<a-button type="link" danger size="small" @click="removeFormatConfig(index)">删除</a-button>
							</div>
							<div class="flex flex-col gap-2">
								<a-select
									v-model:value="config.field"
									placeholder="选择字段"
									class="w-full"
									:options="
										store.formData.itemConfig?.columns
											.filter((col) => store.formData.itemConfig.selectedColumns.includes(col.key))
											.map((col) => ({ value: col.key, label: col.title }))
									"
									@change="(value) => updateFormatConfig(index, 'field', value)"
								/>
								<a-select
									v-model:value="config.type"
									placeholder="选择格式化类型"
									class="w-full"
									:options="formatTypes"
									@change="(value) => updateFormatConfig(index, 'type', value)"
								/>
								<template v-if="config.type === 'fieldname'">
									<a-input
										v-model:value="config.format"
										placeholder="请输入自定义字段名称"
										class="w-full"
										@change="(e) => updateFormatConfig(index, 'format', e.target.value)"
									/>
								</template>
								<template v-else>
									<a-select
										v-model:value="config.format"
										placeholder="选择格式化规则"
										class="w-full"
										:options="
											config.type
												? formatTypes.find((t) => t.value === config.type)?.formats.map((f) => ({ value: f, label: f }))
												: []
										"
										@change="(value) => updateFormatConfig(index, 'format', value)"
									/>
								</template>
							</div>
						</div>
					</div>
				</div>
			</template>
			<a-button
				type="link"
				:class="{ 'text-primary bg-primary-1 shadow-sm': formatConfigVisible }"
				@click="toggleFormatConfig"
			>
				<template #icon><format-painter-outlined /></template>
			</a-button>
		</a-popover>
	</a-tooltip>
</template>

<style scoped>
	:deep(.format-config-popover) {
		min-width: 600px !important;
	}

	.format-config-panel {
		min-width: 500px;
	}

	.format-config-list {
		grid-template-columns: repeat(2, 1fr);
		gap: 16px;
	}

	.format-config-item {
		border: 1px solid #e5e7eb;
		border-radius: 2px;
		padding: 12px;
	}

	.text-primary {
		color: #1890ff;
	}

	.bg-primary-1 {
		background-color: rgba(24, 144, 255, 0.1);
	}
</style>
